<template>
  <div>
    <el-form
      ref="loginMobile"
      :model="loginMobile"
      :rules="MobileRules"
      class="login-form"
    >
      <el-form-item prop="tel">
        <el-input
          v-model="loginMobile.tel"
          type="text"
          auto-complete="off"
          placeholder="请输入手机号"
          onKeypress="return(/[\d\.]/.test(String.fromCharCode(event.keyCode)))"
          maxlength="11"
          size="medium"
        >
          <template slot="prefix">
            <div class="userbox">
              <img class="user-icon" src="@/assets/images/tel.png" alt="" />
              <p>手机号</p>
            </div>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="code" class="code-from">
        <el-input
          v-model="loginMobile.code"
          type="text"
          auto-complete="off"
          placeholder="请输入验证码"
          class="code-input"
          @keyup.enter.native="handleLogin"
          size="meduim"
          @change="changeval"
        >
          <template slot="prefix">
            <div class="userbox">
              <img class="user-icon" src="@/assets/images/code.png" alt="" />
              <p>验证码</p>
            </div>
          </template>
        </el-input>
        <el-button
          v-if="isShow"
          class="code-btn"
          @click.prevent="getcode"
          :loading="loading"
          type="primary"
          size="medium"
          >获取验证码</el-button
        >
        <el-button size="medium" v-else  class="code-btn" 
          >{{ count }}s后重试</el-button
        >
        <div class="el-form-item__error" v-if="loginMobile.code && msgphone">{{ msgphone }}</div>
      </el-form-item>
      <el-form-item style="width: 100%" class="indexBtn">
        <el-button
          :loading="loading"
          size="medium"
          type="primary"
          style="width: 100%"
          @click.native.prevent="handleLogin"
        >
          <span v-if="!loading">登 录</span>
          <span v-else>登 录 中...</span>
        </el-button>
      </el-form-item>
    </el-form>
    <el-dialog :visible.sync="dialogVisible" width="15%"  class="phone-dialog" :modal="false">
      <div>
        <p>当前手机号未绑定账号</p>
        <el-button type="primary" @click="getBind">去绑定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="phonebindVisible" width="20%" title="绑定账号" class="phonebind-dialog" @close="closePhone" :modal="false">
      <el-form :model="phonebindForm"  :rules="phonebindRules" ref="phonebindForm">
        <el-form-item prop="userName">
          <el-input size="medium" v-model="phonebindForm.userName" autocomplete="off" placeholder="请输入账号名">
            <template slot="prefix">
              <img class="account-icon" src="@/assets/images/user.png" alt="" />
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="passWord">
          <el-input type="password" size="medium" v-model="phonebindForm.passWord" autocomplete="off" placeholder="请输入账号密码">
            <template slot="prefix">
              <img class="account-icon" src="@/assets/images/pwd.png" alt="" />
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="phoneNum">
          <el-input size="medium" v-model="phonebindForm.phoneNum" autocomplete="off" placeholder="请输入手机号" 
          onKeypress="return(/[\d\.]/.test(String.fromCharCode(event.keyCode)))"
          maxlength="11">
            <template slot="prefix">
              <img class="account-icon" src="@/assets/images/tel.png" alt="" />
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input v-model="phonebindForm.code" size="medium"  class="code-input" autocomplete="off" placeholder="请输入短信验证码">
            <template slot="prefix">
              <img class="account-icon" src="@/assets/images/code.png" alt="" />
            </template>
          </el-input>
            <el-button
            v-if="isPhoneShow"
            type="primary"
            class="code-btn"
            @click.prevent="getPhonecode"
            :loading="loading"
            size="medium"
            >获取验证码
            </el-button>
          <el-button v-else  size="medium" class="code-btn code-btn0" plain>
            {{ count }}s后重试
          </el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="phonebindVisible = false" size="medium">取 消</el-button>
        <el-button type="primary" @click="getbindSumbit" size="medium">确 认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getTelcode,loginTel,bindAccount } from "@/api/login.js";
import { Message } from "element-ui";
import _ from "lodash";
export default {
  name: "DictTag",
  props: {
    options: {
      type: Array,
      default: null,
    },
    value: [String, Array],
    tab:{
      type:String,
      default:'',
    },
  },
  data() {
    return {
      loginMobile: {
        tel: "",
        code: "",
      },
      MobileRules: {
        tel: [{ required: true, trigger: "change", message: "请输入您的手机号" }],
        code: [
          { required: true, trigger: "change", message: "请输入您的验证码" },
        ],
      },
      msgphone:'',
      isShow: true,
      count: 59,
      loading: false,
      redirect: undefined,
      disabled: false,
      dialogVisible:false,
      phonebindVisible:false,
      phonebindForm:{
        userName:'',
        passWord:'',
        phoneNum:'',
        code:'',
      },
      isPhoneShow:true,
      phonebindRules:{
        userName:[
          { required: true, trigger: "blur", message: "请输入需要绑定的账号" },
          {
            min: 2,
            max: 15,
            message: "长度在 2 到 15 个字符",
            trigger: "blur",
          },
        ],
        passWord:[
          { required: true, trigger: "blur", message: "请输入绑定账号密码" },
          {
            min: 6,
            max: 15,
            message: "长度在 6 到 15 个字符",
            trigger: "blur",
          },
        ],
        phoneNum:[
          { required: true, trigger: "blur", message: "请输入绑定手机号" }
        ],
        code: [
          { required: true, trigger: "blur", message: "请输入验证码" },
        ],
      },
    };
  },
  created(){
    // console.log(this.msg,'111111111111111');
    // this.msgphone = this.msg
  },
  computed: {
    values() {
      if (this.value) {
        return Array.isArray(this.value) ? this.value : [this.value];
      } else {
        return [];
      }
    },
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    },
    tab:{
      handler(val,old){
        console.log(val,'3111111111111111');
        // this.msgphone = val;
        if(val == 'first'){
          this.msgphone = '';
        }
      },
      immediate:true,
      deep:true
    }
  },
  methods: {
    changeval(val){
      console.log(val,'yancccc');
      this.msgphone = '';
    },
    getcode() {
      if (this.validatePhone(this.loginMobile.tel)) {
        this.loading = true;
        // 调验证码的接口
        getTelcode(this.loginMobile.tel)
          .then((res) => {
            if (res.code == 3008) {
              Message({
                message: res.message,
                type: "error",
              });
            }
            if (res.code == 200) {
              this.vaTime(1);
              this.$message.success(res.message);
              if (res.result.code != null) {
                this.loginMobile.code = res.result.code;
              }
            }
          })
          .finally(() => {
            this.loading = false;
          });
      }
    },
    getPhonecode(){
      if (this.validatePhone(this.phonebindForm.phoneNum)) {
        this.loading = true;
        // 调验证码的接口
        getTelcode(this.phonebindForm.phoneNum)
          .then((res) => {
            console.log(res,'this.phonebindForm.phoneNum');
            if (res.code == 3008) {
              Message({
                message: res.message,
                type: "error",
              });
            }
            if (res.code == 200) {
              this.vaTime(2);
              this.$message.success(res.message);
              if (res.result.code != null) {
                this.this.phonebindForm.code = res.result.code;
              }
            }
          })
          .finally(() => {
            this.loading = false;
          });
      }
    },
    // 判断手机号是否合法
    validatePhone(tel) {
      if (!tel) {
        this.$message({
          message: "手机号码不能为空",
          type: "error",
        });
      } else if (!/^1[3|4|5|7|8][0-9]\d{8}$/.test(tel)) {
        this.$message({
          message: "请输入正确的手机号",
          type: "error",
        });
      } else {
        return true;
      }
    },
    // 验证码倒计时
    vaTime(e) {
      console.log(e,'33333333333333');
      this.count = 59;
      if(e == 1){
        this.isShow = false;
      }else{
        this.isPhoneShow = false;
      }
      let timer = 0;
      timer = setInterval(() => {
        if (this.count > 0 && this.count <= 59) {
          this.count--;
        } else {
          if(e == 1){
            this.isShow = true;
          }else{
            this.isPhoneShow = true;
          }
          clearInterval(timer);
          timer = 0;
        }
      }, 1000);
    },
    // 提交按钮
    handleLogin() {
      this.$refs.loginMobile.validate((valid) => {
        if (valid) {
          // this.loading = true;
          console.log(this.loginMobile, "this.loginMobile");
          this.$store
            .dispatch("TelLogin", this.loginMobile)
            .then( res => {
             if(res.success){
                this.$router.push({ name: 'Index' });
             }else{
              if(res.result.status == 40003){
                this.dialogVisible = true;
              }else{
                this.msgphone = res.message
                console.log(this.msgphone,'this.msgthis.msg');
                // this.$message.error(res.message);
                return false;
              }
             }
             
            })
            .catch(() => {
              this.loading = false;
            });
        }
      });
    },
    getBind(){
      this.phonebindVisible = true;
      this.dialogVisible = false;
    },
    getbindSumbit(){
      this.$refs.phonebindForm.validate((valid) => {
        if (valid) {
          bindAccount(this.phonebindForm).then(res=>{
            console.log(res,'this.phonebindFormthis.phonebindForm');
            if(res.success){
              this.$message.success(res.message);
              this.phonebindVisible = false;
            }else{
              this.$message.error(res.message)
            }
          })
        }
      })
    },
    closePhone(){
      this.$refs.phonebindForm.clearValidate();
    },
  },
};
</script>
<style scoped lang="scss">
@media screen and(min-width: 501px)and (max-width: 800px){
    .login-form {
      ::v-deep.el-input .el-input__inner {
        height: 32px !important;
        padding-left: 84px !important;
      }
      .code-input {
        width: 60%;
      }
      .input-icon {
        height: 32px !important;
        width: 14px !important;
        margin-left: 2px;
      }
      .userbox{
        line-height: 7px !important;
      }
    }
}
@media screen and (min-width: 900px) and (max-width: 1280px){
  ::v-deep .el-form-item--mini.el-form-item{
    margin-bottom: 20px !important;
  }
}
.userbox {
  display: flex;
  align-items: center;
  line-height: 19px;
  color: #333;
}
.code-input {
  // width: 230px !important;
}
::v-deep .el-input__inner{
  // margin-bottom: 20px;
}
// ::v-deep .el-form-item--mini.el-form-item{
//   margin-bottom: 20px;
// }
.user-icon {
  width: 16px;
  height: 16px;
  display: block;
  margin-right: 10px;
}
.code-btn {
  margin-left: 3%;
  padding: 10px;
  // margin-bottom: 20px;
}
// .el-button:hover, .el-button:focus {
//     color: #2348E8 !important;
//     border-color: #2348E8 !important;
//     background-color: #fff !important;
// }
.code-btn0 {
  border-color: #2348E8 !important;
  background-color: #ffff !important;
  color: #2348E8 !important;
}
.phone-dialog{
 ::v-deep .el-dialog:not(.is-fullscreen) {
     margin-top: 25vh !important; 
     .el-dialog__header{
      display: none;
    }
    .el-dialog__body{
      background: rgba(0,0,0,0.65);
      border-radius: 4px;
      text-align: center;
      font-size: 18px;
      font-weight: 400;
      line-height: 25px;
      color: #FFFFFF;
    }
  }
  
}
.el-form-item--small.el-form-item{
  margin-bottom: 20px !important;
}
.phonebind-dialog{
  ::v-deep .el-dialog:not(.is-fullscreen) {
     margin-top: 14.3vh !important; 
     margin-right: 20vw;
    .el-input__inner{
      height: 46px;
      padding-left:46px !important;
    }
    ::v-deep .el-input__prefix{
        left: 4px !important;
      }
    .account-icon{
      width: 16px;
      height: 16px;
      display: block;
      margin: 15px 0 0;
    }
    .dialog-footer{
      text-align: center;
    }
  }
}
.el-input-group__append,
.el-input-group__prepend {
  background-color: #fff;
  font-weight: 400;
  color: #333333;
  padding: 0px 10px;
}

.el-checkbox__inner {
  border-radius: 18px !important;
}
::v-deep .el-input__inner {
  height: 48px;
  padding-left: 95px !important;
}
::v-deep .el-form-item__content {
  display: flex;
}
.indexBtn {
  // margin-bottom: 30px;
  .el-button--primary:hover,
  .el-button--primary:focus {
    background-color: #008fff;
    border-color: #008fff;
  }
  .el-button--primary {
    background-color: #008fff;
    border-color: #008fff;
    color: #fff;
    font-size: 16px;
    line-height: 22px;
    padding: 13px 20px;
  }
}
// ::v-deep .el-input__inner{
//   padding-left: 90px !important;
// }
// .el-form-item__content{
//   display: flex;

// }
</style>